<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>改单记录</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="公司编号">
              <a-input v-model="searchForm.truckOrderCode" />
            </a-form-item>
            <a-form-item label="订单状态">
              <a-select v-model="searchForm.status" class="selectInputWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option v-for="v in statusArr" :key="v.key">{{v.title}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="改单日期">
              <a-range-picker :value="[searchForm.time1, searchForm.time2]" @change="onDateChange">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :columns="columns"
            :data-source="tableData"
            class="tableMargin"
            :pagination="pagination"
            :rowKey="(c, i) => i"
          >
            <template slot="code" slot-scope="text, record">
              <a @click="toCompanyCode(record.truckOrderId)">{{text}}</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { queryOrderModifyRecordList } from '@/api/landCenter'

const defaultForm = () => {
  return {
    truckOrderCode: '',
    status: '', // 1待接单、2待派单、3司机待接单、4司机待出发、5运输中、6已完成、7已结算
    time1: '',
    time2: ''
  }
}

const statusArr = [
  {
    key: 1, title: '待接单'
  },
  {
    key: 2, title: '待派单'
  },
  {
    key: 3, title: '司机待接单'
  },
  {
    key: 4, title: '司机待出发'
  },
  {
    key: 5, title: '运输中'
  },
  {
    key: 6, title: '已完成'
  },
  {
    key: 7, title: '已结算'
  }
]

export default {
  data () {
    const columns = [
      {
        title: '序号',
        customRender: (text, record, index) => {
          return index + 1
        }
      },
      {
        title: '公司编号',
        dataIndex: 'truckOrderCode',
        scopedSlots: { customRender: 'code' }
      },
      {
        title: '订单状态',
        dataIndex: 'status',
        customRender: (text, record, index) => {
          const t = this.statusArr.filter(v => v.key === text)[0]
          if (t) return t.title
          return '--'
        }
      },
      {
        title: '改单时间',
        dataIndex: 'createTime'
      },
      {
        title: '改单人',
        dataIndex: 'operatorName'
      },
      {
        title: '改单字段',
        dataIndex: 'modifiedField'
      },
      {
        title: '原数据',
        width: 200,
        dataIndex: 'originalData',
        customRender: (text, record, index) => {
          return text || '--'
        }
      },
      {
        title: '新数据',
        width: 200,
        dataIndex: 'modifiedData',
        customRender: (text, record, index) => {
          return text || '--'
        }
      }
    ]

    return {
      statusArr,
      searchForm: defaultForm(),
      columns,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  methods: {
    onDateChange (data, dataStr) {
      this.searchForm.time1 = dataStr[0]
      this.searchForm.time2 = dataStr[1]
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      queryOrderModifyRecordList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    toCompanyCode (orderTruckId) {
      window.open(`/landCenter/orderDispatch/${orderTruckId}`, '_blank')
    }
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>
